<template>
  <el-drawer
    :title="title"
    v-model="visible"
    :direction="direction"
    :size="800"
  >
    <section class="drawer-main">
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
      >
        <el-form-item label="节点IP" prop="nodeIp">
           <el-input v-model="ruleForm.nodeIp" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input v-model="ruleForm.port"  type="Number"/>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="ruleForm.memo" type="textarea" />
        </el-form-item>
      </el-form>
    </section>
    <footer class="drawer-footer">
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
      <el-button @click="beforeClose">取 消</el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";

import {
  createNode,
  updateNode,
  testConnect,
} from "@/api/adaptation";
import useEditDrawer from "@/hooks/useEditDrawer";
import AppFormSelect from "@/components/AppFormSelect/";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "EditDialog",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
  },
  components: { AppFormSelect },
  setup(props, { emit }) {
    // 表单
    const DEFAULT_FORM = {

    };
    const appList = ref([]);
    // 验证
    const rules = computed(() => {
      const baseRules = {
        nodeIp: [{ required: true, message: "请填写节点IP",trigger:"blur" }],
        port: [{ required: true, message: "请填写节点端口",trigger:"blur" }],
      };
      return baseRules;
    });

    const {
      visible,
      direction,
      title,
      loading,
      ruleForm,
      ruleFormRef,
      submit,
      beforeClose,
    } = useEditDrawer({
      createApi: createNode,
      editApi: updateNode,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...DEFAULT_FORM,
          ...props.item,
        };
        console.log("显示时赋值");
      }
    });
    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      rules,
      title,
      submit,
      beforeClose,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100% - 50px);
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
}
</style>
